<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>



<body onkeydown="doKeyDown(event)">
    <!-- onkeydown 事件 —— 按下键盘按键时发生事件 -->
    <div align="center">
        <!-- 创建一个容器模块 -->
        <!-- 创建一个画布 -->
        <canvas id="Mycanvas" width="600" height="500" style="border-top:2px solid #f00;border-bottom:2px solid green;border-left:2px solid blue;border-right:2px solid #f90;">你的浏览器不支持该功能</canvas><br>
        <!-- 容纳按钮的模块 -->
        <div id="msg"></div>
        <!-- 两个功能按键 -->
        <input type="button" value="重新开始" onClick="rest()">
        <input type="button" value="游戏说明" onClick="explain()">
    </div>
    <script src="animation.js"></script>
    <script type="text/JavaScript">
                var canva=document.getElementById("Mycanvas");  //获取画布元素
                var msg = document.getElementById("msg");       //获取功能按键模块元素
                var context=canva.getContext("2d");             //返回用于画布上绘图的环境，2d 指二维绘图，返回一个 CanvasRenderingContext2D 对象
                var img=new Image();                            //创建一个 image 对象
                img.src = "../img/background2.png";  
                img.onload = function() {                       //onload 事件，加载时将图片绘制在画布上
                    context.drawImage(img,0,0);                 //这里设置坐标意义不大，后面会重新绘制图片
                } 
                
                // var i=1;
                // var j=1;
                //初始化创建
                //创建初始化贪吃球和食物球
                var animation={	                                //为该对象添加属性
                    "x":100,
                    "y":50,                                     //添加x,y方向的偏移量
                    "radius":15,                                //圆的半径
                    "color":"red",                              //颜色
                }
                var Bean={
                    "x":300,
                    "y":200,
                    "color":"blue",
                    "radius":5,
                }
                var Rect={
                    "x":200,
                    "y":100,
                    "color":"red",
                    "width":10,
                    "height":10,				
                }
                function rest(){
                    animation.radius=15;
                    Draw();
                    Drawfood();
                }
                /*****************************************************************
                function:draw()
                use:首先清空画布，再调用animation对象的uodata函数，更新动画属性（在清空画布之前，先对状态进行保存;绘制完成后，及时恢复绘图状态）
                *****************************************************************/
                function Draw(){				
                    var width =600;
                    var height = 500;		
                    //清空画布
                    context.clearRect(0,0,width,height);
     
                    context.drawImage(img, 0, 0);
                    //填充颜色
                    context.fillStyle=animation.color;
                    //重新绘制
                    context.beginPath();
                    context.arc(animation.x,animation.y,animation.radius,0,Math.PI*2,true);//绘制圆球（贪吃球）
                    context.fill();
                };
                window.addEventListener("load",Draw,true);              //向 window 添加事件监听
                function doKeyDown(event){                              //监听键盘方向键是否触发           
                    switch (event.keyCode)
                    {
                    case 37://左键头
                        go("left");
                        break;
                    case 38://上键头
                        go("up");
                        break;
                    case 39://右箭头
                        go("right");
                        break;
                    case 40://下箭头
                        go("down");
                        break;
                    }
                }
                
                function go(dir){
                    //移动贪吃球，重新绘制
                    switch(dir)
                    {
                        case "up":
                        animation.y-=2;
                        Draw();
                        break;
                        case "down":
                        animation.y+=2;
                        Draw();
                        break;
                        case "left":
                        animation.x-=2;
                        Draw();
                        break;
                        case "right":
                        animation.x+=2;
                        Draw();
                        break;
                    }
                    //判断是否发生碰撞
                    if((animation.x-Bean.x)*(animation.x-Bean.x)+(animation.y-Bean.y)*(animation.y-Bean.y)<=(animation.radius+Bean.radius)*(animation.radius+Bean.radius))
                    {
                        // i++;
                        // if(i%2==0)
                        // {
                        //     Beanrandom();
                        // }
                        // if(i%2!=0)
                        // {
                        //     Beanrandom();
                        // }
                        Beanrandom();
                        //改变贪吃球体形
                        animation.radius += 5;
                        //如果贪吃球体积过大，重置贪吃球的体形
                        if(animation.radius>100)
                        {
                            animation.radius=100;
                        }
                        Draw();
                        
                    }
                    if((animation.x-Rect.x)*(animation.x-Rect.x)+(animation.y-Rect.y)*(animation.y-Rect.y)<=(animation.radius+8)*(animation.radius+8))
                    {
                        // j++;
                        // if(j%2==0)
                        // {
                        //     Rectrandom();
                        // }
                        // if(j%2!=0)
                        // {
                        //     Rectrandom();
                        // }
                        Rectrandom();
                        animation.radius += 5;
                        //限制最大体形
                        if(animation.radius>100)
                        {
                            animation.radius=100;
                        }
                        Draw();			
                    }
                    Drawfood();
                }
                //吃球重画食物
                function Drawfood(){
                    DrawBean();
                    DrawRect();
                }
                function DrawBean(){
                    context.fillStyle=Bean.color;
                    context.beginPath();
                    context.arc(Bean.x,Bean.y,Bean.radius,0,Math.PI*2,true);
                    context.fill();
                }
                window.addEventListener("load",DrawBean,true);
                function Beanrandom(){
                    Bean.x=Math.random();                       //产生随机数
                    Bean.x=Math.ceil(Bean.x * 600);             //取整
                    Bean.y=Math.random();
                    Bean.y=Math.ceil(Bean.y * 500);
                }
                // <!-- alert(animation.delay); -->
                function DrawRect(){
                    context.fillStyle=Rect.color;
                    context.beginPath();
                    context.rect(Rect.x,Rect.y,Rect.width,Rect.height);
                    context.strokeStyle="red";
                    context.lineWidth=1;
                    context.fillRect(Rect.x,Rect.y,Rect.width,Rect.height);
                }
                window.addEventListener("load",DrawRect,true);
                function Rectrandom(){
                    Rect.x=Math.random();
                    Rect.x=Math.ceil(Rect.x * 600);
                    Rect.y=Math.random();
                    Rect.y=Math.ceil(Rect.y * 500);
                }
                var showhelp = false;
                function explain(){
                    showhelp = !showhelp;
                    if(showhelp)
                    {
                        msg.innerHTML = "用键盘上的上、下、左、右键移动贪吃球，吃掉蓝色的小球或者红色的方块，可以让贪吃球变大，当然贪吃球不会一直变大的。";
                    }else{
                        msg.innerHTML = "小游戏：贪吃球";
                    };
                }
            </script>

</body>

</html>